<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title></title>

    <link rel="stylesheet" th:href="@{/res/css/amazeui.min.css}">
    <link rel="stylesheet" th:href="@{/res/css/admin.css}">
    <link rel="stylesheet" th:href="@{/res/layui/css/layui.css}">
    <script th:src="@{/js/jquery-1.11.3.min.js}"></script>
    <script th:src="@{/myplugs/js/plugs.js}"></script>
    <link rel="stylesheet" th:href="@{/amazeui/amazeui.min.css}">
    <link rel="stylesheet" th:href="@{/css/font-awesome-4.6.3/css/font-awesome.css}">
    <script th:src="@{/amazeui/amazeui.min.js}"></script>
    <script th:src="@{/amazeui/amazeui.page.js}"></script>
</head>

<body>

<div class="admin-content-body">
    <div class="am-cf am-padding am-padding-bottom-0">
        <div class="am-fl am-cf"><strong class="am-text-primary am-text-lg">菜单管理</strong><small></small></div>
    </div>

    <hr>

    <div class="am-g">
        <div class="am-u-sm-12 am-u-md-6">
            <div class="am-btn-toolbar">
                <div class="am-btn-group am-btn-group-xs">

                    <button class="am-btn am-btn-default btnAdd" id="addmenu" onclick="addmenu('添加菜单')">
                        <span class="am-icon-plus"></span> 新增
                    </button>

                </div>
            </div>
        </div>
    </div>
    <div class="am-g" style="margin-top: 5px;">
        <div class="am-u-sm-12">

            <form class="am-form">
                <table class="am-table am-table-striped am-table-hover table-main">
                    <thead>
                    <tr>
                        <th class="table-id">
                            序号
                        </th>

                        <th>
                            菜单名称
                        </th>

                        <th class="table-set">
                            操作
                        </th>
                    </tr>
                    </thead>

                    <tbody id="menuTable"></tbody>

                </table>
                <div class="am-cf mypage">
                    <%--显示分页条--%>
                </div>
                <!--<div class="am-cf" id="bottom_number"> </div>-->
                <hr>
            </form>
        </div>
    </div>
</div>
</body>

<script type="text/javascript">
    var size = 6;      //每页的数据行
    var total = 0;     //总数据量
    var startPage = 0;  //开始页号
    var endPage = 0;    //尾页号
    var hitPage = 0;    //激活页号
    var pages = 0;    //页数
    var showpages = 3; //分页条展示多少页数
    var flag = 1;      //-1表示向上翻页，1表示向下翻页
    var data;



    $(function () {
        var url = "/menu/selectMenu";
        $.get(url,function(data){
            console.log(data);
            total = data.length;
            pages = Math.ceil(total / size) ;
            console.log(total);
        });
        getSpuList(1);
    });

    //获取商品信息列表
    function getSpuList(pageNum) {
        var url = "/menu/selectByPage?pageNum=" + pageNum +"&pageSize=" + size;
        $.get(url,function(data){
            flag = 1;
            setContent(data);
            pageInfo(startPage, endPage, flag);
        });
    }

    //渲染页面
    function setContent( data){
        var str;
        for(var i in data) {
            str += '<tr>';
            /*str += '<td><input type="checkbox" class="son_check" del_id="\'+ data[i].id + \'"/></td>';*/
            str += '<td>' + data[i].id + '</td>';
            str += '<td>' + data[i].name + '</td>';
            str += '<td>';
            str += '<div class="am-btn-toolbar">';
            str += '<div class="am-btn-group am-btn-group-xs">';
            str += '<button type="button" class="am-btn am-btn-default" onclick="editMenu(\'编辑菜单\','+ data[i].menuId + ','+ "\'"+data[i].name+"\'"+","+data[i].id +","+data[i].level+')"><span class="am-icon-pencil-square-o"></span> 编辑</button>';
            str += '<button type="button" class="am-btn am-btn-default" onclick="delMenu(\'删除菜单\','+ data[i].id + ')"><span class="am-icon-trash-o"></span> 删除</button>';
            str += '</div>';
            str += '</div>';
            str += '</td>';
            str += '</tr>';
        }
        if(str != "" || str != null){
            $("#menuTable").html(str);
        }else{
            $("#menuTable").html("<br/><span style='width:50%;height:100px;display:block;margin:0 auto;'>暂无数据</span>");

        }
    }

    //渲染点击两分页图标箭头的功能
    function pageInfo(startPage, endPage, flag){
        //如果startPage == 1的话，'«'图标不显示， 如果endPage >= pages, '»'图标不显示,flag判断是那个图标被点击了
        var str2 = '';

        str2 += '共'+ total + '条记录';
        str2 += '<div class="am-fr">';
        str2 += '<ul class="am-pagination">';

        if(flag == 1){
            if(startPage == 0) {     //初始化时
                startPage = 1;
            }else{
                startPage = startPage + showpages;
            }
            if(hitPage <= 0) {
                hitPage = 1;
            }else {
                hitPage = endPage + 1;
            }
            endPage = endPage + showpages;
        }else if(flag == -1) {
            hitPage = startPage - 1;
            endPage = startPage -1;
            if(hitPage <= 0){
                hitPage = 1;
            }
            startPage = startPage - showpages;
            if(startPage <= 0) {
                startPage = 1;
            }
        }

        if(startPage != 1) {
            str2 += '<li class="am-disabled front"><a href="#">«</a></li>';
        }

        if(endPage > pages) {
            endPage = pages;
        }
        for(var i = startPage ; i <= endPage; i++ ) {
            if( i == hitPage){
                if(i == startPage){
                    str2 += '<li class="am-active startPage hitPage"><a href="javascript:void(0);">'+ i + '</a></li>';
                }else if(i == endPage){
                    str2 += '<li class="am-active endPage hitPage"><a href="javascript:void(0);">'+ i + '</a></li>';
                }else {
                    str2 += ' <li class="am-active hitPage"><a href="javascript:void(0);">'+ i + '</a></li>';
                }
            }else{
                if(i == startPage){
                    str2 += '<li class="startPage hitPage"><a href="javascript:void(0);">'+ i + '</a></li>';
                }else if(i == endPage){
                    str2 += '<li class="endPage hitPage"><a href="javascript:void(0);">'+ i + '</a></li>';
                }else {
                    str2 += ' <li class="hitPage" ><a href="javascript:void(0);">'+ i + '</a></li>';
                }
            }
        }


        if(endPage < pages){
            str2 += '<li class="am-disabled up"><a href="#">»</a></li>';
        }
        str2 += '</ul>';
        str2 += '</div>';
        $(".mypage").html(str2);
    }

    //更新相应页面的渲染
    $(document).on('click', '.hitPage', function(e) {
        hitPage = $(this).children().text();
        var url = "/menu/selectByPage?pageNum=" + hitPage + "&pageSize=" + size;
        $.get(url, function(data){
            setContent(data);
        });
        $(this).addClass('am-active');
        $(this).siblings().removeClass('am-active');
    });

    $(document).on('click', '.front', function(e) {
        startPage = parseInt($('.startPage').children().text());
        endPage = parseInt($('.endPage').children().text());
        var url = "/menu/selectByPage?pageNum=" + (startPage-1) + "&pageSize=" + size;
        $.get(url, function(data){
            setContent(data);
        });
        flag = -1;
        pageInfo(startPage, endPage, flag);

    });

    $(document).on('click', '.up', function(e) {
        startPage = parseInt($('.startPage').children().text());
        endPage = parseInt($('.endPage').children().text());
        var url = "/menu/selectByPage?pageNum=" + (endPage + 1)+ "&pageSize=" + size;
        $.get(url, function(data){
            setContent(data);
        });
        flag = 1;
        pageInfo(startPage, endPage, flag);

    });


    //编辑
    function editMenu(title, menu_id,name,id,level) {
        $.jq_Panel({
            title: title,
            iframeWidth: 450,
            iframeHeight: 200,
            url: "/editMenu?name=" + name + "&menu_id=" + menu_id + "&id=" + id + "&level=" + level
        });
    }

    //删除
    function delMenu(title,id){
        $.jq_Panel({
            title: title,
            iframeWidth: 350,
            iframeHeight: 100,
            url: "/deleteMenu?id=" + id
        });
    }

    //新增
    function addmenu(title){
        $.jq_Panel({
            title: title,
            iframeWidth: 450,
            iframeHeight: 200,
            url: "/addMenu"
        });
    }

</script>
</html>